{% extends 'goods/goods_base.html' %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.pagination.css">
    <script type="text/javascript" src="/static/js/jquery.pagination.min.js"></script>
    <style>
        .box{
            width: 800px;
            margin: 100px auto;
            height: 34px;
        }
        .page{
            width: 600px;
            height: 32px;
            text-align: center;
            font-size: 0;
            margin: 30px auto;
        }
    </style>
{% endblock head %}
{% block content %}
	<div class="main_wrap clearfix">
		<div class="r_wrap clearfix">
			<ul class="goods_type_list clearfix">
                {% for item in page_obj %}
                    <li>
                        <a href="/detail_{{ item.object.id }}/"><img src="/static/{{ item.object.image }}"></a>
                        <h4><a href="/detail_{{ item.object.id }}/">{{ item.object.name }}</a></h4>
                        <div class="operate">
                            <span class="prize">￥{{ item.object.price }}</span>
                            <span class="unit">{{ item.object.price }}/{{ item.object.unit }}</span>
                            <a href="#" class="add_goods" title="加入购物车"></a>
                        </div>
                    </li>
                {% endfor %}
			</ul>
            <div class="box">
			    <div id="pagination" class="page"></div>
	        </div>
            <script>
                $('#pagination').pagination({
                   currentPage: {{ page_obj.number }},//当前页
                   totalPage: {{ paginator.num_pages }}, //总页数
                   isShow: false,
                   count: 5,
                   prevPageText: '< 上一页',
                   nextPageText: '下一页 >',
                   callback:function (current) {
                       window.location.href='/search/?q={{ query }}&page=' + current;;
                   } 
                });
            </script>
		</div>
	</div>
{% endblock content %}

